import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;
import Moment from 'moment';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: 'none',
      systemData: {},
      data: {},
      soundUrl: '/audio/welcome.mp3'
    };
  }
  componentDidMount() {
    let self = this;
    const token = localStorage.getItem('token');
    // this.props.queryStatistics({ token: token });
    // self.props.queryStatistics({
    //   params: {
    //     token: token
    //   },
    //   func: function (data) {
    //     // console.log(data)
    //     if (data) {
    //       self.setState({
    //         systemData: data
    //       })
    //     }
    //   }
    // })
    self.props.hot_keywords({ token: token });
  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }


  mindexurlFun = () => {
    this.context.router.push(`/1/app/mindex`);
  }
  mapurlFun = () => {
    this.context.router.push(`/1/app/mmap`);
  }
  myurlFun = () => {
    this.context.router.push(`/1/app/mmy`);
  }
  messageUrlFun = () => {
    this.context.router.push(`/1/app/mmessage`);
  }

  // 搜索值
  searchValueFun = (e) => {
    this.setState({
      searchKeywords: e.target.value
    })
  }
  // 点击历史搜索
  searchOn = (value) => {
    this.setState({
      searchKeywords: value,
      isSearch: false,
    })
  }
  // 搜索
  searchFun = (e) => {
    let self = this;
    const token = localStorage.getItem('token');
    let value = this.state.searchKeywords;
    if (!value) {
      message.error('请输入搜索的值', 1.5);
      return false;
    }

    self.props.saveSelect({ 'keywords': value })
    self.context.router.push(`/${self.props.routeParams.id}/app/maidetail`)
    //    console.log(value)

    // self.props.search({
    //   params: {
    //     keywords: value,
    //     token: token
    //   },
    //   func: function (data) {
    //     self.props.saveSelect({ 'keywords': value })
    //     self.context.router.push(`/${self.props.routeParams.id}/app/maidetail`)

    //   }
    // });

  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { data, searchlist } = this.props;
    const { systemData } = this.state;
    // console.log(searchlist);
    // console.log(this.props);
    return (
      <div className={Style.wrapH100 + ' ' + Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            AI系统
           <span className={Style.arrowEdit} onClick={this.messageUrlFun}><em className={Style.bellIcon}></em></span>
          </div>
        </div>
        <div className={Style.chartScreen}>
          <div className={Style.conWrap1} id='conWrap'>
            <h1>AI辅助系统</h1>
            <div className={Style.searchWrap}>
              <Input type='text' placeholder='搜索一下' onChange={this.searchValueFun} value={this.state.searchKeywords} />
              <span className={Style.searchBtn} onClick={this.searchFun}>搜索</span>
            </div>
            <p>

              {
                searchlist.map((item, i) => (
                  <span key={i} onClick={this.searchOn.bind(this, item)}>{item}</span>
                ))
              }
            </p>
          </div>
          <audio autoPlay >
            <source src={`${Service.baseUrl}` + this.state.soundUrl} type='audio/mp3' />
            <embed src={`${Service.baseUrl}` + this.state.soundUrl} type='audio/mpeg' autostart='true' />
          </audio>
        </div>
        <div className={Style.foot}>
          <Row type="flex">
            <Col span={8} order={1} onClick={this.mapurlFun}>
              <em className={Style.footicon + ' ' + Style.mapicon}></em>
              <p>大屏地图</p>
            </Col>
            <Col span={8} order={1} onClick={this.mindexurlFun} className={Style.on}>
              <em className={Style.footicon + ' ' + Style.aiicon}></em>
              <p>AI系统</p>
            </Col>
            <Col span={8} order={1} onClick={this.myurlFun} >
              <em className={Style.footicon + ' ' + Style.myicon}></em>
              <p>我的</p>
            </Col>

          </Row>
        </div>
        <div className={Style.marsk} style={{ display: this.state.loading }}>
          <Icon type="loading" className={Style.loading} />
          <p className={Style.loadText}>请耐心等待...</p>
        </div>
      </div >
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    data: state.mmodel.systemData,
    searchlist: state.mmodel.searchlist,
    loading: !!state.loading.global
  }
}

function dispatchToProps(dispatch) {
  return {
    search(payload = {}) {
      dispatch({ type: 'mmodel/serch', payload })
    },

    saveSelect(payload = {}) {
      dispatch({ type: 'mmodel/save', payload })
    },
    hot_keywords(payload, params) {
      dispatch({ type: 'mmodel/hot_keywords', payload })
    }

  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
